<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="teamShow-box flex">
		<text class="title" v-if="submitInfo.id">修改地址</text>
		<text class="title" v-else>添加地址</text>
		<!-- 	<view class="submit-team-item flex-row-center">
			<view class="teanm-item-left flex-row-center">
				<up-icon name="account" color="#ABABAD" size="32rpx"></up-icon>
				<text class="item-name">姓名</text>
			</view>
			<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
				placeholder="请输入名字" v-model="submitInfo.name"></up-input>
		</view>
		<view class="submit-team-item flex-row-center">
			<view class="teanm-item-left flex-row-center">
				<up-icon name="phone" color="#ABABAD" size="32rpx"></up-icon>
				<text class="item-name">电话</text>
			</view>
			<up-input border="none" :customStyle="{backgroundColor: 'transparent'}" :disabled="submitInfo.id!=0"
				placeholderClass="placeholderClass" type="number" maxlength="11" fontSize="26rpx" color="#DEDEDE"
				placeholder="请输入电话" v-model="submitInfo.phone"></up-input>
		</view>
		<view class="submit-team-item flex-row-center" v-if="!submitInfo.id">
			<view class="teanm-item-left flex-row-center">
				<up-icon name="email" color="#ABABAD" size="32rpx"></up-icon>
				<text class="item-name">验证码</text>
			</view>
			<up-input type="number" color="#D3D5D5" v-model="submitInfo.code" placeholder="请输入验证码" border="none"
				placeholderClass="placeholderClass">
				<template #suffix>
					<view class="suffix-box flex-center">
						<up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
						<view class="getCode-btn flex-center" @click="getCode">
							<text class="text">{{codeTips}}</text>
						</view>
					</view>
				</template>
			</up-input>
		</view> -->
		<view class="submit-team-item flex-row-center">
			<view class="teanm-item-left flex-row-center">
				<up-icon name="map-fill" color="#ABABAD" size="32rpx"></up-icon>
				<text class="item-name">地址填写</text>
			</view>
			<up-input border="none" disabled placeholderClass="placeholderClass" :customStyle="{
				background: 'transparent'
			}" fontSize="26rpx" color="#DEDEDE" placeholder="请输入内容" v-model="submitInfo.address">
				<template #suffix>
					<up-icon @click="chooseLocationTap" name="map-fill" color="#DEDEDE" size="42rpx"></up-icon>
				</template>
			</up-input>
		</view>
		<view class="submit-team-item flex-row-center">
			<view class="teanm-item-left flex-row-center">
				<up-icon name="tags" color="#ABABAD" size="32rpx"></up-icon>
				<text class="item-name">设为默认</text>
			</view>
			<up-switch :activeValue="1" :inactiveValue="0" v-model="submitInfo.default"
				activeColor="#60D4C1"></up-switch>
		</view>
		<view class="submit-btn" v-if="submitInfo.id">
			<up-button text="立即修改" @click="alterSign" :loading="submitInfo.loadingStatus" loadingText="提交中"
				:customStyle="{color:'#18625C',fontSize:'34rpx',fontWeight:'bold',height:'100rpx'}"
				color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);"></up-button>
		</view>
		<view class="submit-btn" v-else>
			<up-button text="立即添加" @click="submitSign" :loading="submitInfo.loadingStatus" loadingText="提交中"
				:customStyle="{color:'#18625C',fontSize:'34rpx',fontWeight:'bold',height:'100rpx'}"
				color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		formatDate
	} from '@/utils/utools.js'
	const emit = defineEmits(['closeAddShow']);
	const alterType = ref(0);
	const props = defineProps({
		addressInfo: {
			default: {}
		}
	});
	import {
		chooseLocation
	} from '@/utils/chooseLocation';

	const sexIndex = ref('男');
	const nowTime = Date.now(); //当前时间
	const timeShow = ref(false);
	const codeTips = ref('获取验证码');
	const uCodeRef = ref(null);
	const customStyle = {
		boxSizing: 'border-box',
		padding: '0 26rpx',
	}
	const sexList = [{
		name: '男',
		type: 1
	}, {
		name: '女',
		type: 2
	}]
	const rules = {
		// phone: {
		// 	required: true,
		// 	maxLength: 11,
		// 	reg: /^1[3-9]\d{9}$/,
		// 	msg: '请输入正确的手机号'
		// },
		address: {
			required: true,
			msg: '请填写姓名'
		},
	};
	const submitInfo = reactive({
		address: '',
		loadingStatus: false,
		default: 0,
		id: 0,
		latitude: 0,
		longitude: 0,
	});
	const getCode = async () => {
		if (uCodeRef.value.canGetCode) {
			if (!isValidPhoneNumber(submitInfo.phone)) {
				uni.$u.toast('请填写正确的手机号');
				return
			}
			uni.showLoading({
				title: '正在获取验证码',
			});
			const res = await $Api.login.getCode({
				mobile: submitInfo.phone,
				event: 'sign'
			});
			if (res.code == '1') {
				setTimeout(() => {
					uni.hideLoading()
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					uCodeRef.value.start();
				}, 600);
			} else {
				uni.hideLoading()
				uni.$u.toast(res.msg);
			}

		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	const codeChange = (text) => { //code提示切换
		codeTips.value = text;
	};
	const chooseLocationTap = async () => { //选择地理位置
		uni.showLoading({
			title: '加载中'
		})
		chooseLocation('', '', true).then((res) => {
			uni.hideLoading();
			if (res) {
				submitInfo.address = res.address + (res.name ? res.name : '');
				submitInfo.latitude = res.latitude;
				submitInfo.longitude = res.longitude;
			}
		}).catch(() => {
			uni.hideLoading();
			uni.$u.toast('获取位置失败');
		})
	}
	const addStatus = () => { //添加名片状态
		uni.$emit('addAddress', {
			type: 1
		})
	}
	const submitSign = async () => { //新增
		// console.log(submitInfo);
		if (submitInfo.loadingStatus) return
		const validate = validateForm(submitInfo, rules); //验证
		if (!validate.status) return
		submitInfo.loadingStatus = true;
		const {
			code,
			msg,
			data
		} = await $Api.address.addAddress({
			address: submitInfo.address,
			latitude: submitInfo.latitude,
			longitude: submitInfo.longitude,
			default: submitInfo.default,
		});
		if (code == '1') {
			uni.showToast({
				title: '添加成功！'
			});
			addStatus();
			setTimeout(() => {
				submitInfo.loadingStatus = false;
				emit('closeAddShow', 1);
			}, 800)
		} else {
			submitInfo.loadingStatus = false;
			uni.$u.toast(msg);
		}
	}
	const alterSign = async () => { //修改
		if (submitInfo.loadingStatus) return
		const validate = validateForm(submitInfo, rules); //验证
		if (!validate.status) return
		submitInfo.loadingStatus = true;
		const {
			code,
			msg,
			data
		} = await $Api.address.editAddress({
			address: submitInfo.address,
			latitude: submitInfo.latitude,
			longitude: submitInfo.longitude,
			default: submitInfo.default,
			id: submitInfo.id,
		});
		if (code == '1') {
			uni.showToast({
				title: '修改成功！'
			});
			addStatus();
			setTimeout(() => {
				submitInfo.loadingStatus = false;
				emit('closeAddShow', 1);
			}, 800)
		} else {
			submitInfo.loadingStatus = false;
			uni.$u.toast(msg);
		}
	}
	watch(() => props.addressInfo, (val) => {
		if (val) {
			submitInfo.address = val.address;
			// submitInfo.sex = val.gender;
			// submitInfo.phone = val.newMobile || val.mobile;
			submitInfo.default = val.default;
			submitInfo.id = val.id;
		} else {
			submitInfo.address = '';
			submitInfo.default = 0;
			submitInfo.id = 0;
		}

	});
</script>
<style>
	.u-textarea__count,
	.u-input,
	.u-textarea {
		padding: 0 !important;
		background-color: transparent !important;
		background: transparent !important;
	}

	.placeholderClass {
		color: #5B6868 !important;
		font-size: 26rpx;
		font-weight: 500;
	}

	.u-textarea__field {
		color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	.teamShow-box {
		background-color: #222528;
		height: 1020rpx;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx;
		border-radius: 18rpx 18rpx 0 0;
		position: relative;

		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: rgba(255, 255, 255, 0.87);
			line-height: 40rpx;
			margin-bottom: 46rpx;
		}

		.submit-team-item {
			margin-bottom: 46rpx;

			.teanm-item-left {
				margin-right: 50rpx;

				.union {
					width: 24rpx;
					height: 22rpx;
				}

				.item-name {
					font-weight: bold;
					font-size: 30rpx;
					color: rgba(255, 255, 255, 0.8);
					line-height: 35rpx;
					text-align: justify;
					text-align-last: justify;
					width: 124rpx;
					margin-left: 10rpx;
					display: block;
				}
			}

			.time-box {
				flex: 1;
				justify-content: space-between;
			}

			.sex-box {
				view:not(:last-child) {
					margin-right: 40rpx;
				}

				.sex-item {
					width: 112rpx;
					height: 64rpx;
					box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #B0B0B2;

					.sex {
						font-weight: 500;
						font-size: 30rpx;
						color: rgba(255, 255, 255, 0.8);
					}
				}

				.sex-item-avtive {
					width: 112rpx;
					height: 64rpx;
					background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
					box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
					border-radius: 8rpx 8rpx 8rpx 8rpx;

					.sex {
						font-weight: bold;
						font-size: 30rpx;
						color: rgba(10, 83, 79, 0.8);
					}
				}
			}

		}

		.submit-btn {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 16rpx;
		}
	}

	.prefix-box {
		width: 128rpx;
		height: 100%;

		.prefix-text {
			font-weight: 500;
			font-size: 30rpx;
			color: #DEDEDE;
			margin-right: 4rpx;
		}
	}

	.getCode-btn {
		padding-left: 18rpx;
		border-left: 2rpx solid #4D4D4D;
		font-weight: 500;
		font-size: 24rpx;
		color: #66B7AF;

	}
</style>